<template>
  <div>
    <div class="detail-page">
      <div class="header-area">
        <div class="title">{{ detail.title }}</div>
        <div class="article-info">
          <div class="img-area" @click="visitAuthor">
            <img :src="detail.main_img" alt="" />
          </div>
          <div class="other-info">
            <div class="author-name">{{ detail.author_name }}</div>
            <div class="time">
              <span>{{
                detail.update_time | format("YYYY-MM-DD HH:mm:ss")
              }}</span>
              <span>字数 {{ detail.words_count }}</span>
              <span>阅读 {{ detail.read_count }}</span>
            </div>
          </div>
        </div>
      </div>
      <editor-detail :content="detail.content"></editor-detail>
      <div class="like-area">
        <div
          :class="{ 'like-btn': true, active: detail.is_like === 1 }"
          @click="articleLike"
        >
          <i class="iconfont icon-like1"></i>
        </div>
        <div class="like-detail">{{ detail.like_count }} 人点赞</div>
      </div>
    </div>
    <div class="comment-area">
      <div class="do-comment-area">
        <div class="avatar-area">
          <img :src="avatar" alt="" />
        </div>
        <div class="comment-input">
          <el-input
            type="textarea"
            :rows="4"
            placeholder="写下你的评论..."
            v-model="comment"
            @focus="handleFocus"
          >
          </el-input>
        </div>
      </div>
      <transition name="slide-fade">
        <div class="input-operate" v-if="showCommentOperate">
          <div class="btn" @click="cancelComment">取消</div>
          <div class="btn primary" @click="sendComment">发布</div>
        </div>
      </transition>
      <div class="all-comment-area" v-if="isLogin">
        <div class="header-area">
          <div class="title">
            全部评论<span>{{ detail.comment }}</span>
          </div>
          <div
            :class="{ 'only-look-author': true, active: onlyLookAuthor === 1 }"
            @click="justLookAuthor"
          >
            只看作者
          </div>
          <div class="order-btn-area">
            <span
              :class="{ active: orderCondition === 'desc' }"
              @click="changeOrder('desc')"
              >按时间倒序</span
            >
            <span
              :class="{ active: orderCondition === 'asc' }"
              @click="changeOrder('asc')"
              >按时间正序</span
            >
          </div>
        </div>
        <div class="comment-list">
          <template v-for="item in commentList">
            <div :key="item.id">
              <div class="comment-item">
                <div class="user-avatar">
                  <img :src="item.user_avatar" alt="" />
                </div>
                <div class="comment-content">
                  <div class="user-info">
                    <div class="user-name">{{ item.nick_name }}</div>
                    <div class="reply-info">
                      {{ item.floor }}楼
                      {{ item.update_time | format("YYYY-MM-DD HH:mm:ss") }}
                    </div>
                  </div>
                  <div class="comment-context">
                    {{ item.content }}
                  </div>
                  <c-oper-bar
                    :id="item.id"
                    :parentId="item.id"
                    :commentObj="item"
                    :likeCount="item.like_count"
                    :replyCount="item.reply_count"
                    :detail="detail"
                    @doRefresh="handleLikeComment"
                  ></c-oper-bar>
                </div>
              </div>
              <div
                class="child-reply"
                v-if="item.childCommentList && item.childCommentList.length > 0"
              >
                <template v-for="cItem in item.childCommentList">
                  <div class="child-reply-border" :key="cItem.id">
                    <div class="user-avatar">
                      <img :src="cItem.user_avatar" alt="" />
                    </div>
                    <div class="user-info">
                      <div class="user-name">{{ cItem.nick_name }}</div>
                      <div class="reply-info">
                        {{ cItem.update_time | format("YYYY-MM-DD HH:mm:ss") }}
                      </div>
                    </div>
                    <div class="comment-content">
                      <div class="comment-context">
                        <a class="to-user-name"
                          >@{{ cItem.to_user_nick_name }}</a
                        >{{ cItem.content }}
                      </div>
                      <c-oper-bar
                        :id="cItem.id"
                        :parentId="item.id"
                        :commentObj="cItem"
                        :likeCount="cItem.like_count"
                        :replyCount="cItem.reply_count"
                        :detail="detail"
                        @doRefresh="handleLikeComment"
                      ></c-oper-bar>
                    </div>
                  </div>
                </template>
                <div class="add-new-bar">
                  <c-oper-bar
                    :isAddNew="true"
                    :id="item.id"
                    :parentId="item.id"
                    :commentObj="item"
                    :detail="detail"
                    @doRefresh="handleLikeComment"
                  ></c-oper-bar>
                </div>
              </div>
            </div>
          </template>
        </div>
        <el-pagination
          class="pager"
          :page-size="pageSize"
          layout="prev, pager, next"
          :total="totalCount"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import EditorDetail from '../../../components/editor-detail/index.vue'
import COperBar from '../components/c-oper-bar.vue'
export default {
  name: 'article-detail',
  data: () => {
    return {
      pageSize: 5,
      totalCount: 0,
      detail: {},
      comment: '',
      showCommentOperate: false,
      commentList: [],
      current: 1,
      onlyLookAuthor: 2, // 是 1  否  2
      orderCondition: 'desc' // asc
    }
  },
  components: { EditorDetail, COperBar },
  computed: {
    avatar () {
      const userInfo = this.$store.state.userInfo
      if (userInfo) {
        return JSON.parse(userInfo).avatar
      } else {
        return ''
      }
    },
    isLogin () {
      return this.$store.state.isLogin
    }
  },
  methods: {
    visitAuthor () {
      this.$router.push({
        path: `/home/${this.detail.author_id}`
      })
    },
    async articleLike () {
      const res = await this.$store.dispatch('article/ARTICLE_LIKE', {
        article_id: Number(this.$route.params.id)
      })
      // console.log(res)
      if (res.status === 200) {
        this.$message.success(res.message)
        // 刷新详情
        this.getDetail()
      }
    },
    async getDetail () {
      const detail = await this.$store.dispatch('article/GET_DETAIL', {
        id: Number(this.$route.params.id)
      })
      this.detail = detail.result.detail
    },
    handleFocus () {
      this.showCommentOperate = true
    },
    cancelComment () {
      this.showCommentOperate = false
    },
    async sendComment () {
      const { detail, comment } = this
      if (comment && comment.trim().length > 0) {
        const res = await this.$store.dispatch('article/SEND_COMMENT', {
          authorId: detail.author_id,
          articleId: detail.id,
          content: comment.trim(),
          isParent: 1,
          toUserId: detail.author_id
        })
        if (res.status === 200) {
          this.$message.success('评论成功')
          this.comment = ''
          this.showCommentOperate = false
          // 刷新评论列表
          this.getCommentList(1)
        }
      }
    },
    justLookAuthor () {
      const { order } = this
      this.onlyLookAuthor = this.onlyLookAuthor === 1 ? 2 : 1
      this.getCommentList(1, order, this.onlyLookAuthor)
    },
    changeOrder (order) {
      if (order !== this.orderCondition) {
        this.orderCondition = order
        this.getCommentList(1, order)
      }
    },
    async getCommentList (current, order = 'desc', onlyLookAuthor = 2) {
      const { commentList } = this
      const list = await this.$store.dispatch('article/COMMENT_LIST', {
        id: Number(this.$route.params.id),
        current,
        order,
        pageSize: this.pageSize,
        onlyLookAuthor
      })
      this.current = current
      this.totalCount = list.result.totalCount
      if (current === 1) {
        this.commentList = list.result.list
      } else {
        if (list.result.list && list.result.list.length > 0) {
          const result = JSON.parse(JSON.stringify(commentList))
          this.commentList = result.concat(list.result.list)
        }
      }
    },
    handleLikeComment (word) {
      if (word === 'comment') {
        this.getDetail()
      }
      this.getCommentList(this.current)
    }
  },
  mounted () {
    this.getDetail()
    this.getCommentList(1)
  },
  beforeCreate () {
    document.querySelector('body').setAttribute('style', 'background: #f9f9f9')
  },
  beforeDestroy () {
    document.querySelector('body').setAttribute('style', 'background: #fff')
  },
  created () {}
}
</script>
<style scoped>
/* 全部评论列表 */
.all-comment-area {
  margin-top: 48px;
  position: relative;
}
.all-comment-area .header-area {
  display: table;
  margin-bottom: 16px;
}
.all-comment-area .header-area .title {
  border-left: 4px solid var(--primaryColor);
  font-size: 18px;
  height: 20px;
  line-height: 20px;
  font-weight: 500;
  padding: 0 12px;
  display: table-cell;
  vertical-align: middle;
}
.all-comment-area .header-area .title span {
  font-size: 14px;
  margin-left: 6px;
}

.all-comment-area .header-area .only-look-author {
  display: table-cell;
  vertical-align: middle;
  font-size: 12px;
  color: #969696;
  padding: 2px 8px;
  border: 1px solid #eee;
  border-radius: 16px;
  cursor: pointer;
}
.all-comment-area .header-area .only-look-author.active {
  color: #fff;
  background: var(--primaryColor);
  border: 1px solid var(--primaryColor);
}
.all-comment-area .order-btn-area {
  position: absolute;
  width: 300px;
  text-align: right;
  top: 2px;
  right: 0;
  font-size: 14px;
  cursor: pointer;
}
.all-comment-area .order-btn-area span {
  color: #969696;
  margin-left: 12px;
}
.all-comment-area .order-btn-area span.active {
  color: #2d2d2d;
}

.comment-list .comment-item {
  display: table;
  margin-top: 16px;
  width: 100%;
}
.comment-list .comment-item .user-avatar {
  display: table-cell;
  width: 40px;
  height: 40px;
  vertical-align: top;
  padding-right: 10px;
}
.comment-list .comment-item .user-avatar img {
  width: 40px;
  height: 40px;
  border-radius: 20px;
}

.comment-list .comment-item .comment-content {
  display: table-cell;
  border-bottom: 1px solid #eee;
  padding-bottom: 16px;
}
.comment-list .user-info .user-name {
  font-size: 15px;
  font-weight: 500;
}
.comment-list .user-info .reply-info {
  margin-top: 2px;
  font-size: 12px;
  color: #969696;
}
.comment-list .comment-context {
  margin: 10px 0 12px;
  font-size: 16px;
  line-height: 1.5;
  word-break: break-all;
}
.child-reply {
  display: table;
  width: 100%;
}
.child-reply-border {
  border-bottom: 1px solid #eee;
  margin-left: 50px;
  padding-bottom: 16px;
  margin-top: 16px;
}
.child-reply .user-avatar {
  display: table-cell;
  width: 40px;
  height: 40px;
  vertical-align: top;
  padding-right: 10px;
}
.child-reply .user-avatar img {
  width: 40px;
  height: 40px;
  border-radius: 20px;
}
.child-reply .user-info {
  display: table-cell;
}
.add-new-bar {
  padding: 16px 0 0 50px;
}
.to-user-name {
  color: #0681d0;
  margin-right: 10px;
}
.pager {
  margin: 30px auto 0;
  text-align: right;
}

.detail-page {
  background: #fff;
  padding: 32px;
  border-radius: 4px;
}
.header-area .title {
  font-size: 30px;
  font-weight: 700;
  word-break: break-word;
  margin-bottom: 0.5em;
}
.header-area .article-info {
  display: table;
  vertical-align: middle;
  margin-bottom: 32px;
}
.header-area .article-info .img-area {
  display: table-cell;
  width: 50px;
  height: 50px;
  vertical-align: middle;
}
.header-area .article-info .img-area img {
  width: 50px;
  height: 50px;
  border-radius: 25px;
}
.header-area .article-info .other-info {
  display: table-cell;
  margin-right: 8px;
  vertical-align: middle;
}
.header-area .article-info .other-info .author-name {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 6px;
}
.header-area .article-info .other-info .time {
  color: #969696;
  font-size: 13px;
}
.time > span {
  margin-right: 10px;
}
.like-area {
  display: table;
  vertical-align: middle;
}
.like-area .like-btn {
  display: table-cell;
  border: 1px solid #eee;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  text-align: center;
  vertical-align: middle;
  color: #969696;
}
.like-area .like-btn.active {
  color: var(--primaryColor);
}
.like-area .like-btn .iconfont {
  font-size: 20px;
  line-height: 40px;
}
.like-area .like-detail {
  display: table-cell;
  padding-left: 15px;
  vertical-align: middle;
}
/* 评论区域 */
.comment-area {
  background: #fff;
  margin-top: 10px;
  padding: 32px;
  margin-bottom: 24px;
  border-radius: 4px;
}
.do-comment-area {
  display: table;
}
.do-comment-area .avatar-area {
  width: 40px;
  height: 40px;
  vertical-align: top;
  display: table-cell;
}
.do-comment-area .avatar-area img {
  width: 40px;
  height: 40px;
  border-radius: 20px;
}
.do-comment-area .comment-input {
  display: table-cell;
  width: 100%;
  padding-left: 10px;
}
.do-comment-area .comment-input /deep/ textarea {
  border: 1px solid #eee;
  border-radius: 4px;
  background-color: #fafafa;
}
.input-operate {
  margin-top: 16px;
  overflow: auto;
}
.input-operate .btn {
  float: right;
  color: #999;
  border: 1px solid #999;
  border-radius: 50px;
  padding: 4px 12px;
  margin-left: 8px;
  font-size: 14px;
  cursor: pointer;
}
.input-operate .btn.primary {
  color: #fff;
  border: 1px solid var(--primaryColor);
  background: var(--primaryColor);
}
.slide-fade-enter-active {
  transition: all 0.3s ease;
}
.slide-fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateY(-10px);
  opacity: 0;
}
</style>
